<template>
    <div class="main-container">
        <ad-left v-if='$store.state.isPc'></ad-left>
        <div class="main">
            <template v-if='!$store.state.isPc'>
                <ul class="f-s main-tab">
                    <li class="active">法币交易</li>
                    <li>礼品卡交易</li>
                </ul>
                <div class="sale-or-buy center">
                    <el-button type='primary'>购买</el-button>
                    <el-button>出售</el-button>
                </div>
            </template>
            <el-tabs v-model="activeName" @tab-click="tabClick">
                <el-tab-pane :label="item.code" :name="`${item.id}`" v-for='item in $store.state.coin' :key='item.id'></el-tab-pane>
            </el-tabs>
            
            <!-- PC下的列表 -->
            <template  v-if='$store.state.isPc'>
                <h1 class="title">
                    <!-- <span>在中国购买比特币</span> -->
                    <span>
                        搜广告
                        <el-select v-model="formData.nation_id" placeholder="國家">
                            <el-option 
                                :label="item.title" 
                                :value="item.id" 
                                v-for='item in $store.state.nation' 
                                :key='item.id'></el-option>
                        </el-select>
                        <el-select v-model="formData.currency_id" placeholder="法幣">
                            <el-option 
                                :label="item.title" 
                                :value="item.id" 
                                v-for='item in $store.state.currency' 
                                :key='item.id'></el-option>
                        </el-select>
                        <el-select v-model="formData.pay_type" placeholder="付款方式">
                            <el-option 
                                :label="item.title" 
                                :value="item.id" 
                                v-for='item in $store.state.payment' 
                                :key='item.id'></el-option>
                        </el-select>
                        <el-button type="primary" @click='search'>搜 索</el-button>
                    </span>
                </h1>
                <el-table 
                    :data='table'
                    :header-cell-style="{background : '#E5F2FF'}"
                    style='width : 1200px; margin: 0 auto;'>
                    <el-table-column label='昵稱' prop='one' width="320">
                        <template slot-scope="scope">
                            <div class="saler-info f-s">
                                <router-link 
                                    :to="`/user-info/${scope.row.user_id}`" 
                                    tag='img' 
                                    :src="scope.row.avatar" 
                                    style='cursor:pointer;'
                                    title="头像"></router-link>
                                <div>
                                    <h1>
                                        {{scope.row.nickname}}-<span>認證資訊</span>
                                    </h1>
                                    <p>
                                        <span>好評 13</span> | 
                                        <span>好评 100%</span>
                                    </p>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label='付款方式' prop='two'>
                        <template slot-scope="scope">
                            <pay-type :pay-ment="scope.row.pay_type_list"></pay-type>
                        </template>
                    </el-table-column>
                    <el-table-column label='限額' prop='trade_limit'></el-table-column>
                    <el-table-column label='價格(CNY)' prop='price'></el-table-column>
                    <el-table-column label='交易' prop='five' width='120'>
                        <template slot-scope="scope">
                            <el-button type='primary' @click="$router.push(`/trade-ad-detail/buy/${scope.row.id}`)">購買</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                
            </template>
            <template v-else>
                <ul class="list">
                    <li class="s-b" v-for='item in 4'>
                        <div class="saler-info">
                            <h1 class="f-s avatar">
                                <img :src="require('@ast/imgs/1.png')" alt="">
                                <span>昵称</span>
                                <span>认证信息</span>
                            </h1>
                            <p>
                                <span>交易13</span>
                                <span>好评 100%</span>
                            </p>
                            <h3>限额：1515-51545CNY</h3>
                            <pay-type></pay-type>
                        </div>
                        <div>
                            <h1 class="price">20.928.55CNY</h1>
                            <el-button type='primary'>购买BTC</el-button>
                        </div>
                    </li>
                </ul>
            </template>
            <div style="padding: 15px;text-align:center;">
                <el-pagination
                    @current-change='pageChange'
                    :page-size ='formData.limit'
                    v-if='total'
                    background
                    layout="prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import AdLeft from '@c/AdLeft'
    import PayType from '@c/PayType'

    import {GetAdList} from '@/api/ad'
    export default {
        components: {
            AdLeft,
            PayType
        },
        data() {
            return {
                activeName : `${this.$store.state.coin[0].id}`,
                table : null,
                total : 0,
                formData : {
                    coin_id : this.$store.state.coin[0].id,//币种id
                    ad_type : 1,//1为场外广告
                    record_type : 2,//1未购买,2为支出
                    nation_id : null,//国家id
                    currency_id : null,//	法币id
                    pay_type : null,//支付类型
                    page : 1,
                    limit : 10
                }
            };
        },
        mounted () {
            this.getAdList()
        },
        methods :{
            getAdList () {
                GetAdList(this.formData)
                    .then(res => {
                        this.table = res.result.data;
                        this.total = res.result.total;
                    })
            },
            tabClick (tab, event) {
                this.formData.coin_id = Number(tab.name)
                this.getAdList();
            },
            search () {
                this.formData.page = 1;
                this.getAdList();
            },
            pageChange (page) {
                this.formData.page = page;
                this.getAdList() 
            },
        }
    }
</script>
<style lang="less" scoped>
    @import url('../../assets/css/_b.less');
    //小屏
    @media screen and (max-width : 670px) {
        .main-container{
            // background: #fff;
            .main-tab {
                li {
                    width: 50%;
                    color: rgb(120,136,158);
                    padding: 15px 0;
                    text-align: center;
                    font-size: 18px;
                    font-weight: bold;
                }
                .active {
                    color: @mainColor;
                }
                
            }
            .sale-or-buy {
                padding: 10px;
                background: #fff;
                .el-button {
                    width: 120px;
                }
            }
            .list {
                li {
                    padding: 10px;
                    background: #fff;
                    border-bottom: 1px solid @borderColor;
                }
                .price {
                    font-size: 15px;
                    font-weight: bold;
                    margin-bottom: 30px;
                }
            }
        }
        .type-select{
            li {
                cursor: pointer;
                padding: 15px 10px;
                font-size: 14px;
            }
            .active {
                color: @mainColor;
            }
        }
    }
    //大屏
    @media screen and (min-width : 670px) {
        .main-container {
            min-width: 1200px;
            margin: 25px auto;
            display: flex;
            justify-content: center;
        }
        .main {
            width: 1140px;
            // background: #fff;
            .type-select-container {
                padding: 5px 20px 5px 0;
            }
            .title {
                font-size: 20px;
                margin-bottom: 15px;
                font-weight: bold;
            }
            .type-select{
                li {
                    cursor: pointer;
                    padding: 15px 50px;
                    font-size: 14px;
                }
                .active {
                    color: @mainColor;
                }
            }
        }
    }
</style>